<template>
  <div>
    <public-head title="物管保修"></public-head>
    <yd-cell-group>
      <yd-cell-item arrow type="label">
        <span slot="left">物业单位：</span>
        <select slot="right" v-model="form.home_id">
          <option
            v-for="item in houseList"
            :value="item.home_id"
            :key="item.home_id"
          >{{ item.project }}({{ item.home_code }})</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">联系人：</span>
        <yd-input slot="right" v-model="form.username" placeholder="请输入联系人姓名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">联系电话：</span>
        <yd-input slot="right" v-model="form.phonenum" placeholder="请输入联系电话"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">预约时间：</span>
        <yd-datetime type="datetime" v-model="form.maintain" slot="right" placeholder="请选择预约时间"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow type="label">
        <span slot="left">紧急情况：</span>
        <select slot="right" v-model="form.level">
          <option value="0">一般</option>
          <option value="1">紧急</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">问题描述：</span>
        <yd-textarea slot="right" v-model="form.other_msg" placeholder="请输入问题描述" maxlength="200"></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" @click.native="submit">提交</yd-button>
    <!--申请成功弹窗-->
    <div class="alert" v-if="showAlert">
      <h2>申请成功</h2>
      <p>您的维护申请已提交，请等待物业人员确认并上门服务，请保持电话畅通，以便服务人员与您联系。</p>
      <router-link to="/myprotectrecord" tag="button" type="button">确定</router-link>
    </div>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import wx from "weixin-js-sdk";
export default {
  components: {},
  data() {
    return {
      showAlert: false, // 显示弹窗
      form: {
        home_id: "", // 维护物业单位
        phonenum: "", // 联系人电话号码
        username: "", // 用户名称
        other_msg: "", // 备注信息
        maintain: "", // 维护时间
        level: 0 //紧急情况
      },
      houseList: []
    };
  },
  created() {
    //判断是否有token
    if (!this.token) {
      this.getOpenId();
    } else {
      this.isBind();
    }
  },
  watch: {},
  methods: {
    getOpenId() {
      this.axios
        .post(root + "/api/weixin/getOpenId", { token: this.$route.query.code })
        .then(res => {
          if (res.data.status == "1") {
            // alert(res.data.data.openid);
            this.storeToken(res.data.data.openid);
            this.isBind();
          } else {
            this.$dialog.toast({
              mes: "网页未获得微信授权！",
              timeout: 1000,
              icon: "error"
            });
          }
        });
    },
    isBind() {
      // 判断是否绑定账号
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/isBind", { token: this.token })
        .then(res => {
          this.isLoading(false);
          // console.log(res.data.status=='1');
          res.data.status == "1"
            ? this.getHouseInfo()
            : this.$dialog.toast({
                mes: "请先进行账号绑定",
                timeout: 1000,
                icon: "error",
                callback: () => {
                  this.$router.replace("/bindaccount");
                }
              });
        });
    },
    getHouseInfo() {
      // 根据电话号码返回用户信息
      this.axios
        .post(root + "/api/member/houseList", {
          token: this.token
        })
        .then(res => {
          if (res.data.status) {
            console.log(res.data.data);
            this.houseList = res.data.data;
          }
        });
    },
    submit() {
      if (!this.form.home_id) {
        this.$dialog.toast({
          mes: "请选择你的物业单位",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if (!this.form.phonenum || !reg.test(this.form.phonenum)) {
        this.$dialog.toast({
          mes: "请输入正确的联系方式",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!this.form.username) {
        this.$dialog.toast({
          mes: "请输入联系人姓名",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!this.form.maintain) {
        this.$dialog.toast({
          mes: "请选择维修时间",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!this.form.other_msg) {
        this.$dialog.toast({
          mes: "请输入报修的问题描述",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      // 提交接口
      this.isLoading(true);
      this.axios
        .post(root + "/api/order/wx/add", {
          token: this.token,
          homeId: this.form.home_id,
          dateService: this.form.maintain,
          problem: this.form.other_msg,
          contactName: this.form.username,
          urgency: this.form.level,
          phone: this.form.phonenum
        })
        .then(res => {
          this.isLoading(false);
          res.data.status == "1"
            ? (this.showAlert = true)
            : this.$dialog.toast({
                mes: res.data.message,
                timeout: 1000,
                icon: "error"
              });
        });
    },
    ...mapActions([
      "maintainInfo",
      "recordAddress",
      "location",
      "contactsId",
      "isLoading"
    ])
  },
  computed: {
    //遮罩状态
    mark() {
      return this.$store.getters.markStatus;
    },
    ...mapState([
      "toast",
      "toastText",
      "maintain_info",
      "curAddress",
      "degreeType",
      "lon",
      "lat",
      "token",
      "contacts_id",
      "is_loading"
    ])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
@import "../../common/style/transition.less";
.apply-maintain {
  .submit {
    display: block;
    margin: 0 auto;
    background: #5b91fe;
    box-shadow: 0 3px 5px 0 rgba(91, 144, 254, 0.5);
    border-radius: 4px;
  }
}

.alert {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 5.5rem;
  background: #fff;
  z-index: 10000;
  .br;
  h2 {
    .ft(0.28rem);
    font-weight: 700;
    color: #222;
    line-height: 0.55rem;
    .tc;
  }
  p {
    padding: 0.21rem 0.45rem;
    .ft;
    color: #404040;
    line-height: 0.5rem;
  }
  button {
    display: block;
    width: 100%;
    line-height: 0.77rem;
    .ft(0.28rem);
    color: #5b91fe;
    .tc;
    border-top: 1px solid #e0e0e0;
  }
}
</style>